<template>
  <div class="phone-login">
    <div class="phone-login-wrapper">
      <div class="choose-login-box" v-show="!phoneLogin">
        <div class="close-wrapper">
          <span class="close" @click="closePhoneBox">
          <img width="100%" height="100%" src="../../assets/img/close@3x.png"/>
        </span>
        </div>
        <div class="login-type-content">
          <div class="left" @click="chooseWechat">
            <span class="type-img">
              <img width="100%" height="100%" src="../../assets/img/wechat-circular@3x.png"/>
            </span>
            <p class="type-text">微信登录</p>
          </div>
          <div class="right" @click="choosePhone">
            <span class="type-img">
              <img width="100%" height="100%" src="../../assets/img/phone@3x.png"/>
            </span>
            <p class="type-text">手机登录</p>
          </div>
        </div>
      </div>
      <div class="phone-box" v-show="phoneLogin">
        <div class="close-wrapper">
          <span class="close" @click="closePhoneBox">
          <img width="100%" height="100%" src="../../assets/img/close@3x.png"/>
        </span>
        </div>
        <div class="phone-content">
          <div class="input-wrapper">
            <mt-field :state="state.phone" placeholder="请输入您的手机号" type="phone" v-model="phoneNumber"></mt-field>
            <p class="tips" v-show="state.phone === 'error'">请确认您的手机号码格式</p>
          </div>
          <mt-field placeholder="请输入您的密码" type="password" v-model="password"></mt-field>
          <div class="bottom-big-btn">
            <a href="javascript:;" class="submit" @click="login"
               :class="{'btn-readonly': state.phone !== 'success' || !phoneNumber || !password}">
              立即登录</a>
          </div>
          <div class="phone-text-box">
            <div class="phone-text-box-left">
              <span class="phone-text" @click="goPage('/phoneForget')">忘记密码</span>
            </div>
            <div class="phone-text-box-right">
              <span class="phone-text" @click="goPage('/phoneRegister')">免费注册</span>
            </div>
          </div>
          <div class="out-login">
            <span class="line"></span>
            <span class="out-login-text">第三方登录</span>
            <span class="line"></span>
          </div>
          <div class="weChat">
            <a href="javascript:;" @click="chooseWechat">
              <img width="100%" height="100%" src="../../assets/img/wechat@3x.png">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {closePhoneBox} from '../../assets/js/common'

  export default {
    data() {
      return {
        phoneLogin: false,
        phoneNumber: '',
        acceptRule: false,
        password: '',
        loginAuto: 0,
        state: {
          phone: '',
          password: '',
          captcha: ''
        }
      }
    },
    watch: {
      phoneNumber(value) {
        if (value.length > 11 || value.indexOf('1') !== 0) {
          this.state.phone = 'error'
        } else {
          this.state.phone = 'success'
        }
      }
    },
    methods: {
      closePhoneBox,
      goPage(url) {
        this.$router.push({path: url})
      },
      choosePhone() {
        this.phoneLogin = true
      },
      chooseWechat() {
        window.location.href = 'https://www.h5youx.com/game/index.php?m=Home&c=PcApi&a=wxMobileAuth'
      },
      login() {
        if (this.state.phone === 'success' && this.phoneNumber && this.password) {
          this.$http.post('/game/index.php?m=Home&c=PcApi&a=login', {
            params: {
              phone: this.phoneNumber,
              password: this.password,
              auto: this.auto
            }
          }).then((response) => {
            if (response.data.code === this.ERROR_OK) {
              this.Toast({
                message: '登录成功！',
                duration: 1000,
                position: 'bottom'
              })
              if (!localStorage.getItem('isLogin') && this.loginAuto === 1) {
                let time = new Date()
                localStorage.setItem('isLogin', JSON.stringify({stat: true, time: time}))
              } else {
                sessionStorage.setItem('isLogin', true)
              }
              setTimeout(() => {
                this.$router.push({path: '/'})
                location.reload()
              }, 1000)
            } else {
              this.Toast({
                message: response.data.info,
                duration: 1000,
                position: 'bottom'
              })
            }
          })
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .phone-login
    position absolute
    width 100%
    height 100%
    background #fff
    z-index 10
    .phone-login-wrapper
      display flex
      justify-content center
      align-items center
      width 100%
      height 100%
      background rgba(0, 0, 0, .2)
      .choose-login-box
        width 426px
        height 305px
        border-radius 10px
        background #fff
        .close-wrapper
          position relative
          .close
            position absolute
            display block
            top 19px
            right 12px
            width 36px
            height 35px
        .login-type-content
          display inline-flex
          width 100%
          margin-top 65px
          justify-content center
          .left, .right
            .type-img
              display block
              margin 0 auto
              width 117px
              height 118px
            .type-text
              margin-top 32px
              font-size 32px
          .left
            margin-right 80px
    .phone-box
      width 620px
      height 772px
      background #fff
      border-radius 10px
      .close-wrapper
        position relative
        .close
          position absolute
          display block
          top 19px
          right 12px
          width 36px
          height 35px
      .phone-content
        margin-top 144px
        padding 0 82px
        .input-wrapper
          position relative
        .phone-text-box
          position relative
          display inline-flex
          margin-top 24px
          width 100%
          .phone-text-box-left, .phone-text-box-right
            .phone-text
              font-size 26px
              color #666
          .phone-text-box-left
            position relative
            display inline-flex
            .box
              display block
              margin-right 27px
              width 26px
              height 26px
              border 1px solid #bfbfbf
            .get
              position absolute
              display block
              width 28px
              height: 18px
              top 2px
              left 2px
          .phone-text-box-right
            position absolute
            right 0
        .out-login
          display inline-flex
          margin-top 34px
          width 100%
          span
            display block
          .line
            flex 1
            margin-top 10px
            border-top 2px solid rgba(0, 0, 0, .2)
          .out-login-text
            flex 1
            text-align center
            font-size 22px
            color #ccc
        .weChat
          margin 23px auto 0 auto
          width 55px
          height 47px
          img
            border-radius 0
</style>
